/* 通用样式 */
.box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: lightgray;
  }
  
  /* 布局容器样式 */
  .normal-flow,
  .float-layout,
  .flex-layout,
  .grid-layout,
  .position-layout {
    border: 2px solid black;
    margin: 20px;
    padding: 10px;
  }
  
  /* 浮动布局 */
  .float-layout {
    overflow: auto; /* 清除浮动 */
  }
  
  .float-layout .box1 {
    float: left;
  }
  
  .float-layout .box2 {
    float: right;
  }
  
  .float-layout .box3 {
    clear: both;
  }
  
  /* 弹性盒子布局 */
  .flex-layout {
    display: flex;
  }
  
  /* 定位布局 */
  .position-layout {
    position: relative;
    width: 200px;
    height: 200px;
  }
  
  .position-layout .box1 {
    position: relative;
    top: 20px;
    left: 20px;
  }
  
  .position-layout .box2 {
    position: absolute;
    top: 50px;
    right: 50px;
  }